<template>
	<view class="box">
		<view class="top" :style="{height:marginNavTop,top:0}">
			<view class="navbar" :style="{paddingTop:statusBarHeight,height:statusNavHeight}">
				<view class="navTop" :style="{height:statusNavHeight}">
					<view class="left" @click="goBack">
						<image src="/static/img/back.svg" mode="aspectFit" class="image"></image>
					</view>
					<view class="center">
						票务详情
					</view>
					<view class="right">
					</view>
				</view>
			</view>
		</view>

		<view class="bottom" :style="{paddingTop:marginNavTop}">
			<!-- 顶部演出信息 -->
			<view class="show-info">
				<view class="show-content">
					<image class="poster" :src="ticketInfo.image" mode="aspectFill"></image>
					<view class="info">
						<view class="title">{{ticketInfo.title}}</view>
						<view class="time">{{ticketInfo.time}}</view>
						<view class="venue">{{ticketInfo.venue}}</view>
					</view>
				</view>
			</view>

			<!-- 票务信息 -->
			<view class="ticket-info">
				<view class="ticket-count">{{currentQR + 1}}/{{tickets.length}}张</view>
				<view class="status">{{tickets[currentQR].used ? '已使用' : '未使用'}}</view>
				<!-- 二维码区域 -->
				<swiper class="qr-swiper" :current="currentQR" @change="qrChange" circular>
					<swiper-item v-for="(ticket, index) in tickets" :key="index">
						<view class="qr-code">
							<image :src="ticket.qrcode" mode="aspectFit"></image>
							<view class="frost-layer" v-if="ticket.used"></view>

						</view>
						<view class="seat-info">{{ticket.seat || '无座位'}}</view>
						<view class="price">{{ticket.price}}元</view>
						<view class="ticket-no">TN: {{ticket.ticketNo}}</view>
					</swiper-item>
				</swiper>
				<view class="swiper-dots">
					<view class="dot" v-for="(item, index) in tickets" :key="index"
						:class="{active: currentQR === index}">
					</view>
				</view>
				<view class="usage-info">一次入场有效</view>
			</view>

			<!-- 底部提示信息 -->
			<view class="bottom-tips">
				<view class="tabs">
					<view class="tab-item" v-for="(tab, index) in tabs" :key="index"
						:class="{active: currentTab === index}" @click="switchTab(index)">
						{{tab.name}}
					</view>
				</view>
				<view class="tips-content">
					<!-- 温馨提示 -->
					<view v-if="currentTab === 0">
						<view class="tip-item">
							<view class="tip-title">
								<text class="icon">⚠</text>
								<text>禁止携带物品</text>
							</view>
							<view class="tip-desc">
								由于安保和版权的原因，大多数演出、展览及比赛场所禁止携带食品、饮料、专业摄录设备、打火机等物品，请您注意现场工作人员和广播的提示，予以配合。
							</view>
						</view>
						<view class="tip-item">
							<view class="tip-title">
								<text class="icon">⚠</text>
								<text>演出时长</text>
							</view>
							<view class="tip-desc">
								不支持退、演出时长:约90分钟（以现场为准）
							</view>
						</view>
					</view>
					<!-- 场馆周边 -->
					<view v-if="currentTab === 1">
						<view class="venue-info">
							<view class="venue-title">交通指南</view>
							<view class="venue-desc">
								<view>地铁：1号线西湖文化广场站E口步行300米</view>
								<view>公交：游1路、K4路、K807路到西湖文化广场站</view>
							</view>
							<view class="venue-title">周边停车</view>
							<view class="venue-desc">
								<view>西湖文化广场地下停车场</view>
								<view>工联CC大厦地下停车场</view>
							</view>
						</view>
					</view>
					<!-- 订单详情 -->
					<view v-if="currentTab === 2">
						<view class="order-info">
							<view class="order-item">
								<text class="label">订单编号：</text>
								<text class="value">2024031512345678</text>
							</view>
							<view class="order-item">
								<text class="label">购买时间：</text>
								<text class="value">2024-03-15 12:34:56</text>
							</view>
							<view class="order-item">
								<text class="label">支付方式：</text>
								<text class="value">微信支付</text>
							</view>
							<view class="order-item">
								<text class="label">订单金额：</text>
								<text class="value">¥160.00</text>
							</view>
						</view>
					</view>
					<!-- 常见问题 -->
					<view v-if="currentTab === 3">
						<view class="faq-list">
							<view class="faq-item">
								<view class="question">Q：电子票如何使用？</view>
								<view class="answer">A：凭二维码到场检票入场即可，无需打印实体票。</view>
							</view>
							<view class="faq-item">
								<view class="question">Q：可以退票吗？</view>
								<view class="answer">A：本场演出不支持退票，请确认后再购买。</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				statusNavHeight: 0,
				marginNavTop: 0,
				ticketInfo: {
					image: '/static/img/test1.jpg',
					title: '转麦座【二狗领衔】一支麦喜剧专场季 | 杭州每周爆笑脱口秀 | 西湖精选放松互动解压沉浸式',
					time: '2024.12.20 20:00',
					venue: '杭州市 | 一支麦小剧场-西湖工联CC店'
				},
				currentQR: 0,
				currentTab: 0,
				tickets: [{
						qrcode: '/static/img/qrcode.jpg',
						used: true,
						seat: '无座位',
						price: '160.00',
						ticketNo: '7607728956'
					},
					{
						qrcode: '/static/img/qrcode.jpg',
						used: false,
						seat: '无座位',
						price: '160.00',
						ticketNo: '7607728957'
					}
				],
				tabs: [{
						name: '温馨提示'
					},
					{
						name: '场馆周边'
					},
					{
						name: '订单详情'
					},
					{
						name: '常见问题'
					}
				]
			}
		},
		created() {
			this.statusBarHeight = getApp().globalData.statusBarHeight + 'px'
			this.statusNavHeight = getApp().globalData.statusNavHeight + 'px'
			this.marginNavTop = (getApp().globalData.statusBarHeight + getApp().globalData.statusNavHeight + 6) + 'px'
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			qrChange(e) {
				this.currentQR = e.detail.current
			},
			switchTab(index) {
				this.currentTab = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F8FA;

		.top {
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			position: fixed;
			z-index: 5;
			background-color: #fff;

			.navbar {
				width: 100%;
				box-sizing: border-box;

				.navTop {
					width: 100%;
					display: flex;
					align-items: center;

					.left {
						width: 180rpx;
						height: 100%;
						display: flex;
						align-items: center;
						padding-left: 40rpx;

						.image {
							width: 64rpx;
							height: 64rpx;
						}
					}

					.center {
						flex: 1;
						text-align: center;
						font-size: 38rpx;
						font-weight: 500;
						color: #000;
					}

					.right {
						width: 180rpx;
					}
				}
			}
		}

		.bottom {
			padding: 20rpx;

			.show-info {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.show-content {
					display: flex;

					.poster {
						width: 180rpx;
						height: 240rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}

					.info {
						flex: 1;

						.title {
							font-size: 28rpx;
							font-weight: 500;
							color: #333;
							line-height: 1.4;
							margin-bottom: 20rpx;
						}

						.time,
						.venue {
							font-size: 26rpx;
							color: #666;
							margin-bottom: 10rpx;
						}
					}
				}
			}

			.ticket-info {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				text-align: center;

				.ticket-count {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
				}

				.status {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 30rpx;
				}

				.qr-swiper {
					width: 100%;
					height: 560rpx;

					.qr-code {
						width: 400rpx;
						height: 400rpx;
						margin: 0 auto;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						.frost-layer {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background: rgba(255, 255, 255, 0.8);
							backdrop-filter: blur(4px);
							-webkit-backdrop-filter: blur(4px);
							z-index: 1;
						}

						.status-stamp {
							position: absolute;
							right: -20rpx;
							top: -20rpx;
							width: 120rpx;
							height: 120rpx;
							z-index: 2;
						}
					}
				}

				.swiper-dots {
					display: flex;
					justify-content: center;
					margin: 20rpx 0;

					.dot {
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background-color: #ddd;
						margin: 0 8rpx;

						&.active {
							background-color: #FF4785;
						}
					}
				}

				.seat-info {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 10rpx;
				}

				.price {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 20rpx;
				}

				.ticket-no {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
				}

				.usage-info {
					font-size: 24rpx;
					color: #999;
				}
			}

			.bottom-tips {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx;

				.tabs {
					display: flex;
					border-bottom: 1rpx solid #eee;
					margin-bottom: 20rpx;

					.tab-item {
						flex: 1;
						text-align: center;
						font-size: 28rpx;
						color: #666;
						padding: 20rpx 0;
						position: relative;

						&.active {
							color: #333;
							font-weight: 500;

							&::after {
								content: '';
								position: absolute;
								bottom: -2rpx;
								left: 50%;
								transform: translateX(-50%);
								width: 40rpx;
								height: 4rpx;
								background-color: #FF4785;
								border-radius: 2rpx;
							}
						}
					}
				}

				.tips-content {
					.tip-item {
						margin-bottom: 30rpx;

						.tip-title {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;

							.icon {
								color: #FF4785;
								margin-right: 10rpx;
							}

							text {
								font-size: 28rpx;
								color: #333;
								font-weight: 500;
							}
						}

						.tip-desc {
							font-size: 26rpx;
							color: #666;
							line-height: 1.6;
							padding-left: 30rpx;
						}
					}

					.venue-info {
						.venue-title {
							font-size: 28rpx;
							font-weight: 500;
							color: #333;
							margin: 20rpx 0 10rpx;
						}

						.venue-desc {
							font-size: 26rpx;
							color: #666;
							line-height: 1.6;

							view {
								margin-bottom: 10rpx;
							}
						}
					}

					.order-info {
						.order-item {
							display: flex;
							margin-bottom: 20rpx;

							.label {
								width: 140rpx;
								font-size: 26rpx;
								color: #666;
							}

							.value {
								flex: 1;
								font-size: 26rpx;
								color: #333;
							}
						}
					}

					.faq-list {
						.faq-item {
							margin-bottom: 30rpx;

							.question {
								font-size: 28rpx;
								color: #333;
								font-weight: 500;
								margin-bottom: 10rpx;
							}

							.answer {
								font-size: 26rpx;
								color: #666;
								line-height: 1.6;
							}
						}
					}
				}
			}
		}
	}
</style>